<template>
  <div class="ip-info-container">
    <a-descriptions 
      style="margin-top: 20px" 
      :data="data" 
      :size="large" 
      title="IP信息详情" 
      :column="1"
    />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const data = ref([]);

    onMounted(() => {
      const { predictionResult } = route.params;
      if (predictionResult) {
        const decodedResult = decodeURIComponent(predictionResult);
        const info = JSON.parse(decodedResult);
        data.value = [
          { label: 'IP地址', value: info.ip },
          // { label: '预测分组ID', value: info.prediction },
          { label: '预测分组名称', value: info.apt_group },
          { label: '时间', value: new Date(info.timestamp).toLocaleString() },
          { label: 'ASN编号', value: info.asn },
          // { label: '标准化ASN', value: info.asn_normalized },
          { label: 'ASN国家代码', value: info.asn_country_code },
          { label: 'ASN描述', value: info.asn_description }
        ];
      }
    });

    return {
      data
    }
  },
}
</script>

<style scoped>
.ip-info-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
</style>